<template>
  <div class="home">
    <div class="shop">
      <div class="shoptj">商城统计</div>
      <div class="shopnav">
        <div class="nav nav1">
          <div>
            <p>商品总数</p>
            <h2>{{ state.proddata }}</h2>
            <p>当前商品总数量</p>
          </div>
          <div>
            <p class="ss">实时</p>
          </div>
        </div>
        <div class="nav nav2">
          <div>
            <p>咨询总数</p>
            <h2>{{ state.consultationdata }}</h2>
            <p>当前咨询总数量</p>
          </div>
          <div>
            <p class="ss">实时</p>
          </div>
        </div>
        <div class="nav nav3">
          <div>
            <p>供需总数</p>
            <h2>{{ state.supplydata }}</h2>
            <p>当前供需总数量</p>
          </div>
          <div>
            <p class="ss">实时</p>
          </div>
        </div>
      </div>
    </div>
    <div class="shop" style="margin-top: 10px;">
      <div style="text-align: right;padding: 4px;" @click="golistinfo">更多》</div>
      <el-tabs type="border-card" v-model="state.tabname">
        <el-tab-pane label="咨询管理" :name="0">
          <el-table :data="state.consultationList" style="width: 100%">
            <el-table-column prop="userId" label="昵称" />
            <el-table-column prop="userName" label="姓名" />
            <el-table-column prop="vxPic" label="头像">
              <template #default="scope">
                <img alt="" :src="scope.row.vxPic" style="width: 50px;height: 50px;">
              </template>
            </el-table-column>
            <el-table-column prop="userPhone" label="联系电话" />
            <el-table-column prop="remark" label="咨询内容" />
            <el-table-column prop="product" label="来源商品">
              <template #default="scope">
                <img alt="" :src="scope.row.product.pic" style="width: 50px;height: 50px;"
                  @click="onDetails(scope.row)">
                <div
                  style="width: 80px;  height: 20px;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;font-size: 12px;"
                  class="aaa" @click="onDetails(scope.row)">
                  {{ scope.row.product.prodName }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag type="success" v-if="scope.row.status == 0">
                  已查看
                </el-tag>
                <el-tag type="warning" v-if="scope.row.status == 1">
                  未查看
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="时间" />
            <el-table-column fixed="right" label="操作">
              <template #default="scope">
                <el-button type="primary" @click="onDetails(scope.row)">
                  查看
                </el-button>
                <el-button type="danger" @click="onDelete(scope.row.consultationId)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="供需管理" :name="1">
          <el-table :data="state.supplyList" style="width: 100%;">
            <el-table-column prop="createUser" width="100" label="发布者" />
            <el-table-column prop="userId" width="100" label="昵称" />
            <el-table-column prop="phone" label="联系电话" />
            <el-table-column prop="publishType" width="90" label="发布类型" />
            <el-table-column prop="vxPic" label="头像">
              <template #default="scope">
                <img alt="" :src="scope.row.vxPic" style="width: 50px;height: 50px;">
              </template>
            </el-table-column>
            <el-table-column prop="pic" label="封面图">
              <template #default="scope">
                <img alt="" :src="scope.row.pics[0]" style="width: 50px;height: 50px;">
              </template>
            </el-table-column>
            <el-table-column prop="content" label="内容" />
            <el-table-column prop="remark" label="标题" />
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag type="success" v-if="scope.row.status == 0">
                  通过
                </el-tag>
                <el-tag type="warning" v-if="scope.row.status == 2">
                  待审核
                </el-tag>
                <el-tag type="danger" v-if="scope.row.status == 1">
                  未通过
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="时间" />
            <el-table-column fixed="right" label="操作">
              <template #default="scope">
                <el-button type="primary" @click="onDetails(scope.row)">
                  查看
                </el-button>
                <el-button type="danger" @click="onDeletes(scope.row.supplyId)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <LookList v-if="state.lookListVisible" @refresh-data-list="getlist" ref="lookLists" />
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import lookList from './lookList.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { checkFileUrl, isAuth, treeDataTranslate } from '@/utils'
import LookList from './lookList.vue';
import router from '@/router'

const state = reactive({
  proddata: 0,
  consultationdata: 0,
  supplydata: 0,
  supplyList: [],
  consultationList: [],
  lookListVisible: false,
  tabname: 0
})
const golistinfo = () => {
  console.log(state.tabname);
  if(state.tabname == 0){
    router.push('/order/consultation')
  }else{
    router.push('/order/supply')
  }
}
const onDelete = (ids) => {
  ElMessageBox.confirm('确定进行删除操作?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    http({
      url: http.adornUrl('/prodConsultation/delete/' + ids),
      method: 'get',
    }).then(() => {
      ElMessage({
        message: '操作成功',
        type: 'success',
        duration: 1500,
        onClose: () => {
          getconsultation()
          getProdConsultationList()
        }
      })
    })
  })
}
const onDeletes = (ids) => {
  ElMessageBox.confirm('确定进行删除操作?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    http({
      url: http.adornUrl('/supply/delete/' + ids),
      method: 'get',
    }).then(() => {
      ElMessage({
        message: '操作成功',
        type: 'success',
        duration: 1500,
        onClose: () => {
          getlist()
          getsupply()
        }
      })
    })
  })
}
const getprod = () => {
  http({
    url: http.adornUrl('/count/prod'),
    method: 'get',
    params: http.adornParams()
  }).then((res) => {
    state.proddata = res.data
  })
}
const getconsultation = () => {
  http({
    url: http.adornUrl('/count/consultation'),
    method: 'get',
    params: http.adornParams()
  }).then((res) => {
    state.consultationdata = res.data
  })
}
const getsupply = () => {
  http({
    url: http.adornUrl('/count/supply'),
    method: 'get',
    params: http.adornParams()
  }).then((res) => {
    state.supplydata = res.data
  })
}
const getlist = () => {
  http({
    url: http.adornUrl('/supply/list'),
    method: 'post',
    data: { logo: 3 }
  }).then((res) => {
    console.log(res)
    state.supplyList = res.data.map((item) => {
      if (item.publishType == 1) {
        item.publishType = '供应'
      } else {
        item.publishType = '需求'
      }
      // if (item.status == 0) {
      //   item.status = '通过'
      // } else if (item.status == 1) {
      //   item.status = '未通过'
      // } else {
      //   item.status = '未通过'
      // }
      return item
    })
  })
}

const getProdConsultationList = () => {
  http({
    url: http.adornUrl('/prodConsultation/getProdConsultationList'),
    method: 'post',
    data: { logo: 3 }
  }).then((res) => {
    console.log(res)
    state.consultationList = res.data.map((item) => {
      if (item.publishType == 1) {
        item.publishType = '供应'
      } else {
        item.publishType = '需求'
      }
      // if (item.status == 0) {
      //   item.status = '已查看'
      // } else {
      //   item.status = '未查看'
      // }
      return item
    })
  })
}
const lookLists = ref(null)
const onDetails = (obj) => {
  if (obj.consultationId) {
    http({
      url: http.adornUrl('/prodConsultation/updateProdConsultation'),
      method: 'post',
      data: {
        consultationId: obj.consultationId,
        status: '0'
      }
    }).then(() => {
      getProdConsultationList()

    })
  }

  state.lookListVisible = true
  nextTick(() => {
    lookLists.value?.init(obj)
  })
}

onMounted(() => {
  getprod()
  getconsultation()
  getsupply()
  getlist()
  getProdConsultationList()
})
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
  // background-color: #fff;
}

.shop {
  width: 100%;
  height: auto;
  padding: 20px 10px;
  background-color: #fff;
  border-radius: 10px;
}

.shoptj {
  width: 100%;
  height: 40px;
  font-size: 20px;
  border-bottom: solid 1px #ccc;
  padding: 0 10px;
}

.shopnav {
  width: 100%;
  height: 190px;
  display: flex;
  justify-content: space-around;

  .nav {
    width: 31.3%;
    padding: 12px;
    margin: 13px;
    height: 170px;
    background: rgb(27, 201, 142);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    color: #fff;

    p {
      font-size: 16px;
    }

    h2 {
      font-size: 28px;
      margin: 20px 0;
    }

    .ss {
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      background: hsla(0, 0%, 100%, .3);
    }
  }

  .nav2 {
    background: rgb(230, 71, 88);
  }

  .nav3 {
    background: rgb(178, 159, 255);
  }
}

.pp {
  width: 100px;
  height: 20px;
  overflow: hidden;
  /* 隐藏超出部分 */
  text-overflow: ellipsis;
  /* 显示省略号 */
  white-space: normal;
  /* 允许文本换行 */
}

.aaa:hover {
  color: #155BD4;
  cursor: pointer;
}
</style>
